<script setup>
import SearchForm from '@/components/Search-Form.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { getMonthlyList, getCardRate, delMonthlyCard } from '@/api/monthly'
import TableBase from '@/components/Table-Base.vue'
import TablePagination from '@/components/Table-Pagination.vue'
import { MessagePlugin } from 'tdesign-vue-next'
import MainContent from '@/components/Main-Content.vue'

const router = useRouter()
const infoMessage = ref('本园区共计 0 个车位，月卡用户 0 人，车位占有率 0%')
const formData = ref({
    carNumber: '',
    personName: '',
    cardStatus: ''
})
const query = ref({
    page: 1,
    pageSize: 10
})
const listData = ref({
    list: [],
    total: 0
})
const columns = ref([
    {
        colKey: 'row-select',
        type: 'multiple',
        width: 60
    },
    {
        title: '序号',
        colKey: 'serial-number',
        width: 80
    },
    {
        title: '车主姓名',
        colKey: 'personName'
    },
    {
        title: '联系方式',
        colKey: 'phoneNumber',
        'min-width': 150
    },
    {
        title: '车牌号码',
        colKey: 'carNumber'
    },
    {
        title: '车辆品牌',
        colKey: 'carBrand'
    },
    {
        title: '有效天数',
        colKey: 'totalEffectiveDate'
    },
    {
        title: '状态',
        colKey: 'cardStatus'
    },
    {
        title: '操作',
        colKey: 'option',
        width: 200
    }
])

const getMonthlyCardRate = async () => {
    const res = (await getCardRate()).data
    infoMessage.value =
        `本园区共计 ${ res.spaceNumber } 个车位，月卡用户 ${ res.cardCount } 人，车位占有率 ${ res.proportion }`
}
const search = async () => {
    const params = JSON.parse(JSON.stringify(formData.value))
    if (params.cardStatus === '-1') params.cardStatus = null
    const res = await getMonthlyList({
        ...query.value,
        ...params
    })
    listData.value.list = res.data.rows.map(e => {
        e.cardStatus === 1 ? e.cardStatus = '已过期' : e.cardStatus = '可用'
        return e
    })
    listData.value.total = res.data.total
    await getMonthlyCardRate()
}
const reset = () => {
    formData.value = {
        carNumber: '',
        personName: '',
        cardStatus: ''
    }
    search()
}
const addMonthlyCard = () => {
    router.push('/car/monthly/detail?type=add')
}
const getRow = async (data, type) => {
    if (type === 'del') {
        const res = await delMonthlyCard(data.row.id)
        if (res.code === 10000) {
            await MessagePlugin.success('删除成功!')
            if (listData.value.list.length === 1 && query.value.page > 1) query.value.page--
            await search()
        } else {
            await MessagePlugin.error(res.msg)
        }
    } else if (type === 'view') {
        await router.push('/car/monthly/list?id=' + data.row.id)
    } else {
        await router.push('/car/monthly/detail?type=' + type + '&id=' + data.row.id)
    }
}
const changePage = e => {
    query.value.page = e.current
    query.value.pageSize = e.pageSize
    search()
}

search()
</script>

<template>
    <main-content>
        <search-form>
            <t-form
                ref="form"
                :data="formData"
                label-width="auto"
                layout="inline"
            >
                <t-form-item label="车牌号码">
                    <t-input v-model.trim="formData.name" placeholder="请输入车牌号码"></t-input>
                </t-form-item>

                <t-form-item label="车主姓名">
                    <t-input v-model.trim="formData.personName" placeholder="请输入车主姓名"></t-input>
                </t-form-item>

                <t-form-item label="状态">
                    <t-select
                        placeholder="请选择状态"
                        v-model.trim="formData.cardStatus"
                        showArrow>
                        <t-option key="-1" label="全部" value="-1"/>
                        <t-option key="0" label="可用" value="0"/>
                        <t-option key="1" label="已过期" value="1"/>
                    </t-select>
                </t-form-item>

                <t-form-item style="min-width: auto">
                    <t-button @click="search" type="submit" style="margin-right: 10px;">查询</t-button>
                    <t-button @click="reset" variant="outline">重置</t-button>
                </t-form-item>
            </t-form>
        </search-form>

        <table-base :columns="columns" :list="listData.list">
            <template #top-btn>
                <div style="margin-bottom: 20px; display: flex; justify-content: space-between;">
                    <div style="display: flex; align-items: center">
                        <t-button theme="primary" @click="addMonthlyCard" style="margin-right: 10px">添加月卡</t-button>
                        <t-button theme="danger" @click="addMonthlyCard" variant="outline">批量删除</t-button>
                    </div>
                    <div>
                        <t-alert theme="info" :message="infoMessage" />
                    </div>
                </div>
            </template>
            <template #option-table="row">
                <t-button variant="text" theme="primary" @click="getRow(row, 'renew')">续费</t-button>
                <t-button variant="text" theme="primary" @click="getRow(row, 'view')">查看</t-button>
                <t-button variant="text" theme="primary" @click="getRow(row, 'edit')">编辑</t-button>
                <t-popconfirm
                    destroyOnClose
                    showArrow
                    @confirm="getRow(row, 'del')"
                    theme="warning" content="确认删除吗">
                    <t-button variant="text" theme="primary">删除</t-button>
                </t-popconfirm>
            </template>
        </table-base>

        <table-pagination :total="listData.total" @changePage="changePage"></table-pagination>
    </main-content>
</template>

<style scoped lang="scss">
</style>
